<template>
  <div class="wrap">
    <div class="header">
      <div>
        {{$t('table.warehouse')}}:
        <el-radio-group v-model="queryParams.warehouseId" class="mgb10" @change="getData">
          <el-radio-button
            v-for="warehouse in warehouseList"
            :key="warehouse.id"
            :label="warehouse.id"
          >
            {{ warehouse.warehouseName }}
          </el-radio-button>
        </el-radio-group>
        <diy-date v-model="queryParams.time" @change="getData" :set-day-type="30" :disdisabled="loading"></diy-date>
      </div>

    </div>
    <div class="content">
      <el-tabs v-model="queryParams.stockField" @tab-click="getData">
        <el-tab-pane :label="$t('shipment.oneStock')" :name="stockField.stockNum"></el-tab-pane>
        <el-tab-pane :label="$t('shipment.middleWarehouse')" :name="stockField.middleStockNum"></el-tab-pane>
        <el-tab-pane label="快出库存" :name="stockField.fullStockNum"></el-tab-pane>
      </el-tabs>
      <el-table
        :data="data"
        border
        :key="apiTimes"
        show-summary
        :summary-method="getSummaries"
        v-loading="loading"
        v-tableHeight="{bottomOffset: 80}"
        height="100px"
        ref="tableData"
      >
        <el-table-column
          :label="$t('table.date')"
          prop="date"
          align="center"
          min-width="100"
        ></el-table-column>
        <el-table-column
          v-for="item in weightRangeList"
          :key="item.rangeId"
          :prop="'detail' + item.rangeId"
          :label="item.weightName + (queryParams.stockField === stockField.middleStockNum ? `（${$t('箱')}）` : `（${$t('个')}）`)"
          align="center"
          min-width="150"
        >
          <template v-slot="{row}">
            <template v-if="row['detail' + item.rangeId]">
              <el-tooltip content="Top center" placement="top">
                <template #content>
                  {{item.weightName}}: ≥{{row['detail' + item.rangeId].weight}}
                  <template v-if="row['detail' + item.rangeId].rangeType === 'weight'">
                    kg
                  </template>
                  <template v-else>
                    m³
                  </template>
                  ,
                  {{row['detail' + item.rangeId].price}}{{$t('common.currency')}}
                </template>
                <div>
                  <span class="font-red">{{row['detail' + item.rangeId].calNum}}</span>
                  /
                  <span>{{row['detail' + item.rangeId].totalNum}}</span>
                </div>
              </el-tooltip>
            </template>
            <template v-else>
              -
            </template>
          </template>
        </el-table-column>


        <el-table-column
          :label="$t('总数量') + (queryParams.stockField === stockField.middleStockNum ? `（${$t('箱')}）` : `（${$t('个')}）`)"
          prop="sumCalNum"
          align="center"
          min-width="120"
          fixed="right"
        >
          <template v-slot="{row}">
            <div>
              <span class="font-red">{{row.sumCalNum}}</span>
              /
              <span>{{row.sumTotalNum}}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('table.totalStorageCost')"
          prop="totalFee"
          align="center"
          min-width="120"
          fixed="right"
        ></el-table-column>


      </el-table>
      <div class="mgt10 f13">
        <div class="font-grey">
          {{$t('列表统计库存数量按/区分为：非免仓期数量 / 总数量（免仓期+非免仓期数量）')}}
        </div>
        <div class="font-red">
          {{$t('仓储费用根据非免仓期库存数量计算收取')}}
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import DiyDate from "@/views/order/components/DiyDate";
import {getStorageDateFee} from "@/api/storage";
import {deepCopy} from "@/utils";
import {getWarehouseList} from "@/api/warehouse";
import {stockField} from "@/utils/stock";
import {calGoodsVolumeWeight} from "@/utils/common";



export default {
  name: "storageList",
  components: {DiyDate},
  data(){
    return {
      queryParams: {
        time: [],
        warehouseId: 0,
        stockField: stockField.stockNum,
      },
      stockField,
      total: 0,
      apiTimes: 0, // 用于刷新表格
      data: [],
      loading: false,
      warehouseList: [], // 仓库列表
      weightRangeList: [], // 重量范围
    }
  },
  created() {
    this.getWarehouseList()
  },
  updated () {
    this.$nextTick(() => {
      this.$refs['tableData'].doLayout();
    })
  },
  methods:{
    getWarehouseList(){
      getWarehouseList()
        .then(res=>{
          this.warehouseList = res.data
          this.warehouseList.some(item=>{
            this.queryParams.warehouseId = item.id
            return true;
          })
          if(this.queryParams.warehouseId){
            this.getData()
          }
        })
    },
    getData(){
      this.loading = true
      getStorageDateFee(this.queryParams)
        .then(res=>{
          this.loading = false;
          this.data = deepCopy(res.data);
          this.weightRangeList = res.info.weightRangeList;
          this.apiTimes++;
        })
    },
    getSummaries(param){
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = this.$t('table.sum');
          return;
        }
        if(index === (columns.length - 1)){
          sums[index] = data.reduce((prev, curr)=>{
            return prev + Number(curr.totalFee)
          },0)
          sums[index] = sums[index].toFixed(2)
        }else if(index === (columns.length -2)){
          let sumCalNum = data.reduce((prev,curr)=>{
            return prev  + Number(curr.sumCalNum)
          },0)
          let sumTotalNum = data.reduce((prev,curr)=>{
            return prev  + Number(curr.sumTotalNum)
          },0)
          sums[index] = sumCalNum + ' / ' + sumTotalNum
        }else{
          let calNum = data.reduce((prev,curr)=>{
            return prev  + (curr[column.property] ? Number(curr[column.property].calNum) : 0)
          },0)
          let sumTotalNum = data.reduce((prev,curr)=>{
            return prev  + (curr[column.property] ? Number(curr[column.property].totalNum) : 0)
          },0)
          sums[index] = calNum + ' / ' + sumTotalNum
        }
      });

      return sums;
    }
  }
}
</script>

<style>
.wrap{
  .el-table__footer-wrapper{
    font-weight: bold;
  }
}
</style>

<style scoped lang="scss">
.wrap {
  padding: 30px 30px;

  .header {
    display: flex;
    justify-content: space-between;
  }

  .content {
    padding: 20px 0 0;
  }

}

</style>
